<<template>
		<view :class="state ? 'box2' : 'box1'" @tap.stop.prevent="">
			<view :class="state ? 'goods1' : 'goods2'" v-for="(item,index) in datalist">
				<view class="top">
					<view class="i1">
						<van-icon name="close" @tap="close"/>
					</view>
					
					<view class="i2">
						<van-icon name="share-o"/>
					</view>
				</view>
				
				<view class="swiper">
					<swiper autoplay="true" 
					circular="true" 
					interval="1500" 
					duration="500"
					indicator-dots="true"
					indicator-color="#F0AD4E"
					indicator-active-color="#d7d7d7"
					style="height: 390rpx;"
					>
						<swiper-item v-for="(val,index) in item.images">
							<image :src="val.url" mode=""></image>
						</swiper-item>
					</swiper>
				</view>
				
				<view class="tipbox">
					<view class="h1 clear">
						<text>{{item.name}}</text>
					</view>
					
					<view class="tip1 clear">
						<view class="p1">
							1
						</view>
						<view class="p2">
							2
						</view>
					</view>
					
					<view class="tip2">
						<view>
							产品描述
						</view>
						<view class="description">
							{{item.description}}
						</view>
					</view>
					
					
				</view>
				
				
			
				
				
				
				
				
				
				
				
				<view class="buy">
					<view class="buy_top">
						<view class="left">
							<text>¥ {{item.price}}</text>
						</view>
						<view class="right">
							<view class="butbox">
								<view class="minus" @tap="handleCount(false)">
									<image src="../../../static/images/orderfoot/minus.png" mode=""></image>
								</view>
								<view class="num">
									<view>
										{{item.goodsNum}}
									</view>
								</view>
								<view class="add" @tap="handleCount(true)">
									<image src="../../../static/images/orderfoot/add.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<view class="buy_bottom">
						<button type="default" @tap="addShoppingCar(item.id)">
							{{state1 ? '加入购物车' : '购物车中移除'}}
						</button>
					</view>
				</view>
				
				
	
			</view>
		</view>
</template>

<script>
	import { mapState,mapMutations } from "vuex"
	export default {
		data() {
			return {
				transition: true,
				datalist: [],
				num: 1,
				price: 99,
				goodsSumPrice: 99,
				state1: true
			};
		},
		mounted() {
			this.$bus.$on('test',(data)=>{
				//每次调用前清空数据
				this.datalist = []
				//重置购物状态
				this.state1 = true
				//遍历购物车数据
				for (var i = 0; i < this.shoppingCarData.length; i++) {
					//查询点开的商品是否在购物车中
					if(this.shoppingCarData[i].id == data.id){
						//从购物车中拿到对应数据,放入datalist中
						this.datalist.unshift(this.shoppingCarData[i])
						this.state1 = false
						return
					}
				}
				//当前商品不在购物车中的情况
				data.goodsNum = 1
				this.datalist.unshift(JSON.parse(JSON.stringify(data)))
				this.swiperimg = data.images
			})
		},
		methods: {
			//关闭弹出
			close(){
				this.$store.state.popustatus = !(this.$store.state.popustatus)
				this.num = 1
			},
			//增减商品
			handleCount(e){
				if(e){
					//console.log("+",this.datalist[0].goodsNum)
					this.datalist[0].goodsNum +=1
				}else{
					//console.log("-")
					if(this.datalist[0].goodsNum>1)
					 this.datalist[0].goodsNum -=1

				}
			},
			//加入购物车操作
			addShoppingCar(e){
				//console.log(this.datalist,1111111111111)
				if(this.state1){
					this.shoppingCarData.unshift(this.datalist[0])
					this.$store.state.shoppingCarNum += 1
					this.state1 = false
				}else{
					//把当前商品从购物车中移除
					console.log(e,123)
					for(let index in this.shoppingCarData){
						if(this.shoppingCarData[index].id == e){
							console.log(index,456)
							this.shoppingCarData.splice(index,1)
							this.$store.state.shoppingCarNum -= 1
							this.state1 = true
						}
					}
					
				}
			}
		},
		computed: {
			...mapState(['shoppingSumPrice','shoppingCarData','shoppingCarNum']),
			state(){
				return this.$store.state.popustatus
			}
		}
		
	}
</script>

<style scoped>
	.container1{
		width: 100%;
		height: 1000rpx;
	
	}
	.box1{
		width: 75%;
		height: 75%;
		background-color: #FFFFFF;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 999;
		animation: b 0.4s forwards;
	}
	.box2{
		width: 90%;
		height: auto;
		background-color: #FFFFFF;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%) scale(0.5);
		border-radius: 30rpx;
		z-index: 999;
		padding-bottom: 15rpx;
		animation: a 0.4s forwards;
	}
	@keyframes a{
		from{
			transform: translate(-50%,-50%) scale(0.5);
		}
		to{
			transform: translate(-50%,-50%) scale(1);
		}
	}
	@keyframes b{
		from{
			transform: translate(-50%,-50%) scale(1);
		}
		to{
			transform: translate(-50%,-50%) scale(0);
		}
	}
	.goods1{
		width: 100%;
		display: block;
		position: relative;
	}
	.goods2{
		height: 100%;
		display: none;
		position: relative;
	}
	
	
	.top{
		width: 100%;
		height: 10%;
		border-top-right-radius: 30rpx;
		border-top-left-radius: 30rpx;
	}
	.top .i1,.top .i2{
		width: 50rpx;
		line-height: 75rpx;
		text-align: center;
		float: right;
		font-size: 1.5rem;
	}
	.top .i1{
		width: 75rpx;
		margin-right: 15rpx;
		color: #d7d7d7;
	}
	#swiper{
		width: 100%;
		height: 50%;
		
	}
	.swiper{
		width: 100%;
		height: 40%;	
	}
	.swiper swiper-item image{
		width: 100%;
		height: 100%;
	}
	.tipbox{
		width: 90%;
		height: 40%;
		margin: 0 auto;
		padding-bottom: 20rpx;
	}
	.tip1 .p1{
		width: 100rpx;
		height: 40rpx;
		float: left;
		background-color: #4CD964;
	}
	.tip1 .p2{
		width: 100rpx;
		height: 40rpx;
		float: left;
		background-color: #ffff00;
	}
	.h1 text{
		font-size: 1.2rem;
		font-weight: 700;
		float: left;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
	}
	.tip2{
		width: 100%;
		height: auto;
		margin: 10rpx auto;
		color: #9b9b9b;
		font-size: 0.9rem;
	}
	.tip2 .description{
		margin-top: 20rpx;
		font-size: 0.8rem;
	}
</style>

<style scoped>
	.buy{
		width: 90%;
		height: 200rpx;
		margin: 0 auto;
		border-top: 0.5rpx solid #909090;
	}
	.buy_top{
		width: 100%;
		height: 50%;
	}
	.buy_top .left{
		width: 70%;
		height: 100%;
		float: left;
		position: relative;
	}
	.buy_top .right{
		width: 30%;
		height: 100%;
		float: left;
		position: relative;
	}
	.buy_top .left text{
		line-height: 50rpx;
		display: block;
		color: #DD524D;
		font-size: 1.1rem;
		font-weight: 700;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
	.buy_bottom{
		width: 100%;
		height: 50%;	
	}
	.buy_bottom button{
		width: 100%;
		line-height: 85rpx;
		background-color: #8bc34a;
		color: #FFFFFF;
		font-size: 0.9rem;
	}
	.butbox{
		width: 100%;
		height: 100%;
		
	}
	.butbox > view{
		width: 33.3%;
		height: 100%;
		float: left;
		position: relative;
	}
	
	.butbox image,.butbox .num >view {
		width: 40rpx;
		height: 40rpx;
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
</style>